<template>
  <div>
    <CategorySelector></CategorySelector>
    <SpuList
      @setShowStatus="changeStatus"
      v-if="showStatus === 'SPU_LIST'"
      @getSpuInfo="saveSpuInfo"
    ></SpuList>
    <SpuForm
      @setShowStatus="changeStatus"
      v-if="showStatus === 'SPU_FORM'"
      :currentSpuInfo="currentSpuInfo"
      ref="spu"
    ></SpuForm>
    <SkuForm
      @setShowStatus="changeStatus"
      v-if="showStatus === 'SKU_FORM'"
      :currentSpuInfo="currentSpuInfo"
    ></SkuForm>
  </div>
</template>

<script>
import CategorySelector from "@/components/CategorySelector/index.vue";
import SpuList from "./components/SpuList.vue";
import SpuForm from "./components/SpuForm.vue";
import SkuForm from "./components/SkuForm.vue";

export default {
  name: "Spu",

  components: {
    CategorySelector,
    SpuList,
    SpuForm,
    SkuForm,
  },

  data() {
    return {
      showStatus: "SPU_LIST",
      currentSpuInfo: {},
    };
  },

  methods: {
    //1. 实现spu中SpuList SpuForm SkuForm三个组件间的切换
    changeStatus(status) {
      this.showStatus = status;
    },

    // 2. 接收待编辑的数据
    saveSpuInfo(spuInfo) {
      console.log("11111", spuInfo);
      this.currentSpuInfo = {
        ...spuInfo,
        spuImageList: [],
        spuSaleAttrList: [],
      };
    },
  },
};
</script>

<style></style>
